<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
  <title>试卷</title>
  <th:block th:include="common/public::layui"></th:block>

  <style>
    .back {
      padding: 4px 5px;
      position: absolute;
      top: 52px;
      right: 17%;
      color: #555;
      cursor: pointer;
    }

    .back:hover {
      background-color: #f2f2f2;
    }
  </style>
</head>
<body style="background-color: #fff">
<div class="layui-col-md12" style="text-align: center">
  <form class="layui-form layui-form-pane" action="" style="margin-top: 15px;display: inline-block">
    <div class="layui-form-item">
      <label class="layui-form-label">试卷查询</label>
      <div class="layui-input-inline" style="margin-right: 0">
        <input type="text" name="title" id="title" placeholder="请输入试卷名称" autocomplete="off" class="layui-input"/>
        <input type="hidden" name="answerType" class="layui-input" th:value="${answerType}"/>
      </div>
      <div class="layui-input-inline" style="width: auto">
        <button class="layui-icon layui-icon-search layui-btn" lay-submit="" lay-filter="*"></button>
      </div>
    </div>
  </form>
  <div class="back" onclick="window.location.href = prefixUrl + '/dic/library'">
      <span>
        <i class="layui-icon layui-icon-return" style="text-align: right"></i>
        返回
      </span>
  </div>
</div>

<div class="layui-col-md-offset2 layui-col-md8">
  <table class="layui-table" lay-data="{page:true, id:'table'}" lay-filter="table">
    <thead>
    <tr>
      <th lay-data="{field:'id',hide:true}">id</th>
      <th lay-data="{field:'title',minWidth:300}">试卷名称</th>
      <th lay-data="{field:'answerTime',minWidth:100,templet:'<div>{{d.answerTime}}分</div>'}">答题时间</th>
      <th lay-data="{field:'createTime',minWidth:200}">创建时间</th>
      <th lay-data="{toolbar:'#tool',minWidth:200}">操作</th>
    </tr>
    </thead>
  </table>
</div>
<script type="text/html" id="tool">
  <a class="layui-btn layui-btn-sm" lay-event="study">学习</a>
  <a class="layui-btn layui-btn-sm layui-btn-normal" lay-event="test">考试</a>
</script>
<script th:inline="javascript">
  layui.use(['jquery', 'table', 'form'], function () {
    var answerType = [[${answerType}]];
    var $ = layui.$;
    var table = layui.table;
    var form = layui.form;
    //初始加载
    loadTable({answerType: answerType});
    //操作列点击事件
    table.on('tool(table)', function (obj) {
      if (obj.event == 'study') {
        location.href = prefixUrl + '/answer/study/' + obj.data.id;
      } else if (obj.event == 'test') {
        location.href = prefixUrl + '/answer/test/' + obj.data.id;
      }
    });
    //  表单提交事件
    form.on('submit(*)', function (data) {
      loadTable(data.field);
      return false;
    });

    //表格加载
    function loadTable(data) {
      table.reload('table', {
        url: prefixUrl + '/answerCard/getByAnswerType',
        where: data
      });
    }
  });
</script>
</body>
</html>